import { useState, useDebugValue } from "react"

/**useDebugValue:
 * value: 要在 React DevTools 中显示的值
formatter?: (可选) 格式化函数
作用：自定义值的显示格式
调用时机：仅在 React DevTools 打开时才会调用，可以进行复杂的格式化操作
参数：接收 value 作为参数
返回：返回格式化后的显示值
 * @param name 
 * @param initVal 
 * @returns 
 */

// cooKie简单虚心
export function useCookie(name: string, initVal: string) {
    const [cookie, setCookie] = useState(initVal)

    function updateCookie(val: string, options?: any) {
        document.cookie = `${name}=${val};${options}`
        setCookie(val)
    }

    function getCookie(name: string) {
        // 获取cookie
        const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`))
        return match ? match[2] : initVal
    }

    // 删除，直接通过设置过期时间来删除
    function deleteCookie(name: string) {
        // 删除cookie
        document.cookie = `${name}=;expires=${new Date(0).toUTCString()}`
        setCookie(initVal)
    }

    // 自定义显示格式
    useDebugValue(cookie, (val) => `cookie:${val}`)

    return [cookie, updateCookie, deleteCookie] as const
}